<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:47:37
 * @LastEditTime: 2021-05-02 15:56:50
 * @LastEditors: coocase
 * @Description: 用户列表
 * @FilePath: \git\dami\src\pages\account\accountManage.vue
-->
<template>
    <div>
        <pageHeader :menuName="menu"></pageHeader>
        <Tabs type="card">
            <TabPane label="基本资料">
                <Form
                    ref="formValidate"
                    :model="formValidate"
                    :rules="ruleValidate"
                    :label-width="80"
                    :class="datePiker"
                >
                    <FormItem label="昵称" prop="name">
                        <Input
                            v-model="formValidate.name"
                            placeholder="输入你的昵称"
                        ></Input>
                    </FormItem>
                    <FormItem label="联系电话" prop="phonenumber">
                        <Input
                            v-model="formValidate.phonenumber"
                            placeholder="输入你的联系电话"
                        ></Input>
                    </FormItem>
                    <FormItem label="真实姓名" prop="trueName">
                        <Input
                            v-model="formValidate.trueName"
                            placeholder="输入你的真实姓名"
                        ></Input>
                    </FormItem>
                    <FormItem label="身份证" prop="id">
                        <Input
                            v-model="formValidate.id"
                            placeholder="输入你的身份证"
                        ></Input>
                    </FormItem>
                    <FormItem label="生日" prop="birthday">
                        <DatePicker
                            type="date"
                            placeholder="选择你的生日"
                            v-model="formValidate.birthday"
                            @on-open-change="dateChange"
                        ></DatePicker>
                    </FormItem>
                    <FormItem label="性别" prop="gender">
                        <RadioGroup v-model="formValidate.gender">
                            <Radio label="male">男性</Radio>
                            <Radio label="female">女性</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem>
                        <Button
                            type="primary"
                            @click="handleSubmit('formValidate')"
                            >保存</Button
                        >
                    </FormItem>
                </Form>
            </TabPane>
            <TabPane label="头像设置">标签二的内容</TabPane>
            <TabPane label="兴趣爱好">标签三的内容</TabPane>
        </Tabs>
    </div>
</template>

<script>
import PageHeader from "./pageHeader";
export default {
    name: "AccountInfo",
    props: ["datas"],
    data() {
        return {
            //验证数据
            formValidate: {
                name: this.datas.name,
                phonenumber: this.datas.phonenumber.toString(),//输入框绑定的是String格式，不转换 默认验证会失败
                trueName: this.datas.trueName,
                id: this.datas.id.toString(),
                birthday: this.datas.birthday,
                gender: this.datas.gender,
            },
            //验证规则
            ruleValidate: {
                name: [
                    {
                        required: true,
                        message: "昵称不能为空",
                        trigger: "blur",
                    },
                ],
                phonenumber: [
                    {
                        required: true,
                        message: "电话号码不能为空",
                        trigger: "blur",
                    },
                    { len:11, message: "电话号码格式不正确", trigger: "change" },
                ],
                trueName: [
                    {
                        required: true,
                        message: "真实姓名不能为空",
                        trigger: "blur",
                    },
                ],
                id: [
                    {
                        required: true,
                        message: "身份证不能为空",
                        trigger: "blur",
                
                    },
                    { len: 18, message: "身份证号码错误", trigger: 'change' },
                ],
                birthday: [
                    {
                        required: true, type: 'date', message: 'Please select the date', trigger: 'change' 
                    },
                ],
                gender: [
                    {
                        required: true,
                        message: "请选择性别",
                        trigger: "change",
                    },
                ],
            },
            menu: "accountManage",
            datePiker:'account-info',
            
        };
    },
    components: {
        PageHeader,
    },
    methods: {
        //点击触发验证
        handleSubmit: function (name) {
            //validate 对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败，支持 Promise
            //参数 callback

            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success("成功!");
                } else {
                    this.$Message.error("失败!");
                }
            });
        },
        dateChange:function (bool) {  
            
            if(bool){
                this.datePiker = "account-info data-pike"
            }else{
                this.datePiker = "account-info"
            }
        }
        //test
        // test:function () {
        //     console.log('accountInfo >');
        //     console.log(this.datas);

        // }
    },
    mounted() {
        // this.test();
    },
};
</script>

<style scoped>
.account-info {
    width: 500px;
    transition: 0.75s;
}
.data-pike{
    margin-bottom: 150px;
    transition: 0.5s;
}
</style>